<template>
  <div class="data-item-container">
    <div class="data-info">
      <h3>{{ item.name }}</h3>
      <p>类型: {{ typeName }} | 大小: {{ formatSize }} | 上传时间: {{ formatDate }}</p>
    </div>
    <div class="data-actions">
      <button @click="handleDownload">下载</button>
      <button @click="handleDelete">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  computed: {
    typeName() {
      const types = {
        vector: '矢量数据',
        raster: '栅格影像',
        json: 'JSON数据'
      }
      return types[this.item.type]
    },
    formatSize() {
      if (this.item.size < 1024) {
        return `${this.item.size} B`
      } else if (this.item.size < 1024 * 1024) {
        return `${(this.item.size / 1024).toFixed(2)} KB`
      } else {
        return `${(this.item.size / (1024 * 1024)).toFixed(2)} MB`
      }
    },
    formatDate() {
      return new Date(this.item.lastModified).toLocaleString()
    }
  },
  methods: {
    handleDelete() {
      this.$emit('delete', this.item.id)
    },
    handleDownload() {
      this.$emit('download', this.item)
    }
  }
}
</script>

<style scoped>
.data-item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-info {
  flex: 1;
}

.data-actions button {
  margin-left: 10px;
}

h3 {
  margin: 0 0 5px 0;
}

p {
  margin: 0;
  color: #666;
  font-size: 0.9em;
}
</style>